<template>
  <div>
    <div class="title-gra authorityDiv">
      <span style="color:#0090ff">系统操作权限</span>
      <span class="right"
        ><i
          :class="flag ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          @click="isOpen"
        ></i
      ></span>
      <!-- <div class="grab gra-r"></div> -->
    </div>
    <div v-show="flag" id="mlflag">
      <el-tree
        v-show="flag"
        :data="treeData"
        :show-checkbox="!view"
        :props="defaultProps"
        node-key="authorityId"
        ref="tree"
        :default-expand-all="true"
        :default-checked-keys="defaultCheck"
        @check-change="handleCheckChange"
        @check="handleCheck"
        :class="view ? 'viewcheckbox' : ''"
      >
      </el-tree>
      <div class="dialogFooter dialog-footer mt-20">
        <el-button
          v-if="!view && treeData.length != 0"
          type="primary"
          @click="submit"
          >确 定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  systemauthotityAuthority,
  queryRolesauthority
} from "@/api/authority.js";
export default {
  name: "TabSystemsyAuthority",
  data() {
    return {
      treeData: [],
      ifView: false,
      defaultProps: {
        children: "children",
        label: "authorityName",
        defaultCheck: "",
        defaultAllCheck: ""
      },
      flag: true
    };
  },
  watch: {},
  props: ["isSystemAuthority", "tabPosition", "view"],
  created() {
    this.init();
  },
  methods: {
    init() {
      this.treeData = this.toTree(this.isSystemAuthority.listValue, 0);
      this.checkTreeKey(this.isSystemAuthority.checkValue);
      this.ifView = this.isSystemAuthority.ifView;
    },
    handleCheckChange() {},
    //递归处理数据成为树的数据

    toTree(data, pid) {
      var result = [],
        temp;
      for (var i = 0; i < data.length; i++) {
        if (data[i].parentId == pid) {
          result.push(data[i]);
          temp = this.toTree(data, data[i].authorityId);
          if (temp.length > 0) {
            data[i].children = temp;
          }
        }
      }
      return result;
    },
    checkTreeKey(checkVal) {
      var arr = [];
      checkVal.forEach(e => {
        arr.push(e.authorityId);
      });
      this.defaultCheck = arr;
    },
    submit() {
      var systemAuthority = this.processData(
        this.$refs.tree.getCheckedKeys(),
        this.$refs.tree.getHalfCheckedKeys()
      );
      systemauthotityAuthority(this.isSystemAuthority.id, {
        sysAuthority: systemAuthority
      }).then(res => {
        if (res) {
          this.$message.success("保存系统操作权限成功");
        }
      });
    },
    handleCheck() {
      if (this.ifView == true) {
        this.$refs.tree.setCheckedKeys(this.defaultCheck);
      }
    },
    processData(check, halfCheck) {
      let data = [];
      check.forEach(e => {
        data.push({ authorityId: e, nodeFlag: 1 });
      });
      halfCheck.forEach(e => {
        data.push({ authorityId: e, nodeFlag: 0 });
      });

      return data;
    },
    isOpen() {
      this.flag = !this.flag;
    },
    getSystemList(id) {
      this.defaultCheck = [];
      this.defaultAllCheck = [];
      queryRolesauthority(id).then(res => {
        if (res.systemAuthority) {
          res.systemAuthority.forEach(val => {
            this.defaultCheck.push(val.authorityId);
            if (val.nodeFlag == 1) this.defaultAllCheck.push(val.authorityId);
          });

          this.$refs.tree.setCheckedKeys(this.defaultAllCheck);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/base.scss";
@import "@/assets/css/dialog.scss";

.ifViewcheckbox .el-checkbox__input.is-checked .el-checkbox__inner,
.ifViewcheckbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  @include el-button--primary($el-button-default);
}
.ifViewcheckbox .el-checkbox__inner,
.ifViewcheckbox .el-checkbox__inner:hover,
.ifViewcheckbox .el-checkbox__inner:focus,
.ifViewcheckbox .el-checkbox__inner:active {
  border-color: #425365 !important;
}
</style>
